<template>
  <div class="productInfo">
    <div class="work-v1">
      <a class="work-v1-img-gradient" >
        <img
          class="img-responsive"
          :src="dataEntity.imgUrl"
          :alt="dataEntity.title"
        />
        <span style="" class="work-v1-view btn-white-brd btn-base-sm radius-3" @click="detail()">
          查看详细
        </span></a
      >
      <div class="work-v1-wrap">
        <div class="work-v1-content">
          <h2 class="work-v1-title">
            <a @click="detail()">{{ dataEntity.title }}</a>
          </h2>
          <ul class="list-inline work-v1-list">
            <li class="work-v1-category">
              <a class="work-v1-category-link" @click="detail()">{{
                dataEntity.typeName
              }}</a>
            </li>
            <li class="work-v1-date">{{dataEntity.time}}</li>
          </ul>
          <div class="work-v1-collapse hide">
  
            <p>
              {{ dataEntity.content }}
            </p>
     
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style  lang="scss">
.productInfo {
  position: relative;

  img {
    width: 450px;
    height: 450px;
  }
  .work-v1 {
    position: relative;
    box-shadow: 0 2px 5px 3px #eff1f8;
    overflow: hidden;
  }
  .work-v1 .work-v1-img-gradient {
    position: relative;
    text-decoration: none;
  }
  .work-v1-img-gradient {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .work-v1-wrap {
    padding-left: 10px;
  }
  .work-v1 .work-v1-wrap {
    position: relative;
  }
  .work-v1 .work-v1-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background: #fff;
    padding: 20px;
  }
  .work-v1 .work-v1-title {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .work-v1 .work-v1-list {
    margin-bottom: 0;
  }
  .list-inline {
    margin-left: 0;
  }
  .work-v1 .work-v1-collapse {
    padding-top: 15px;
  }
  p {
    font-size: 16px;
    font-weight: 400;
    font-family: "Microsoft YaHei", "PingHei", "PingFang SC", "STHeitiSC-Light",
      "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    color: #606060;
    line-height: 1.4;
  }
  .hide {
    display: none !important;
  }
  .work-v1:hover .hide {
    display: block !important;
  }
  .work-v1:hover .work-v1-img-gradient .work-v1-view {
    top: 20%;
    opacity: 1;
    transition-duration: 400ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
  }
  .work-v1:hover .work-v1-img-gradient:before {
    background: rgba(52, 52, 60, 0.3);
    transition-duration: 400ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
  }
  .work-v1 .work-v1-img-gradient:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    content: " ";
    transition-duration: 400ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
  }
  .work-v1 .work-v1-img-gradient .work-v1-view {
    position: absolute;
    top: 20%;
    transform: translate3d(-50%, 0, 0);
    opacity: 0;
    transition-duration: 400ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
    margin-left: 10%;
  }
  .btn-white-brd {
    display: inline-block;
    line-height: 1.4;
    color: #fff;
    text-align: center;
    background: transparent;
    background-image: none;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .btn-base-sm {
    font-size: 14px;
    font-weight: 400;
    padding: 9px 22px;
  }
  .radius-3 {
    border-radius: 3px !important;
  }
}
</style>
<script>

export default {
  name: "product",
  props: {
    dataEntity: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {};
  },
  // 注册组件
  components: {},
  methods: {
    init() {},
    detail(){
      this.$router.push("productDetailInfo?id="+this.dataEntity.id);

    }
  },
  created() {
    // 监听
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {},
};
</script>